<template>

  <div>

 	<div class="top-tis">
 		<Breadcrumb>
        	<Breadcrumb-item>你当前位置</Breadcrumb-item>
        	<Breadcrumb-item href="/index">首页</Breadcrumb-item>
          <Breadcrumb-item  href="/term">术语</Breadcrumb-item>
       	  <Breadcrumb-item>{{english}}</Breadcrumb-item>
    	</Breadcrumb>
 	</div>	

     <div class="showContent">

        <div class="term">

            <div class="actice-title">
                术语学习
            </div>

            <div class="actice-name">

                <p class="english"> {{english}} <Icon type="code"></Icon> {{chinese}} </p>
            </div>

            <div  class="actice-content">
                <p><span style="font-weight:800;">来源：</span>{{sources}}</p>
                <p> <span style="font-weight:800;"> 定义：</span> {{defines}}</p>
                <p> <span style="font-weight:800;"> Defines： </span>


                <br>

                  <p style="text-indent:2em">
                    {{englishEefines}}
                  </p>

                 </p>
            </div>

            <router-link style="background:#fff;font-size:14px;color:#2d8cf0;" class="term-herf" :to="{path: '/term'}">返回</router-link>

        </div>

    </div>

  </div>
</template>
<style scoped>
   
@import '../../assets/css/ccm.css';
.showContent{
  padding: 12px 0;
  height: auto;
}
.actice-title{
  font-size: 24px;
  width: 100%;
  height: 56px;
  line-height: 56px;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 800;
  border-bottom: 1px solid #eee;
}
.actice-name{
  margin: 0 auto;
  height: 80px;
  text-align: center;
  border:2px solid #5cadff;
  border-radius: 4px; 
}
.english,.chinese{
  font-size: 28px;
  color: #5cadff;
  line-height: 80px;
}
.english{
  font-weight: 800;
}

.actice-content{
  padding-left: 10%;
  height: auto;
  padding: 12px 0;
  margin:  36px auto 12px;
}
.actice-content p{
  font-size: 18px;
  line-height: 42px;
}
</style>

<script>


export default {
	components:{
	  },
          
  data(){

    return {

      english:'',
      chinese:'',
      sources:'',
      defines:'',
      englishEefines:'',
    	
    }

  },
  created() {

  	this.getCarousel();

  },

  methods:{

    getCarousel(){

    	this.$store.commit('mainLoading', true);

    	this.$http.get('/term/'+ this.$route.query.id).then(
    		termlist => {

          this.english = termlist.data.data.english;
          this.chinese = termlist.data.data.chinese;
          this.sources = termlist.data.data.sources;
          this.defines = termlist.data.data.defines;
          this.englishEefines = termlist.data.data.english_defines;

        	this.$store.commit('mainLoading', false);


        	}).catch(err => {

            this.$Message.error( 'termlist');
        
        })
    },
      
  }
}
</script>

